<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{monitoring/layout}">

<head>
    <title th:text="#{cas.loggingdashboard.title}"></title>
    <script th:inline="javascript">
        /*<![CDATA[*/

        var logConfigFileLocation = /*[[${logConfigurationFile}]]*/;

        var urls = {
            getConfiguration: /*[[@{/status/logging/getConfiguration}]]*/,
            getAuditLog: /*[[@{/status/logging/getAuditLog}]]*/,
            updateLevel: /*[[@{/status/logging/updateLoggerLevel}]]*/,
            reportsWebsocket: /*[[@{/reports-websocket}]]*/
        };

        /*]]>*/
    </script>

    <script type="text/javascript" th:inline="javascript">

        function jqueryReady() {
            head.load(
                /*[[@{/css/loggingDashboard.css}]]*/
            );
            head.load(
                /*[[@{/js/sockjs.js}]]*/,
                /*[[@{/js/stomp.js}]]*/,
                /*[[@{/js/loggingDashboard.js}]]*/
            );
        }
    </script>
</head>

<body>
<div layout:fragment="content">

    <h2>Logging</h2>
    <div id="loggingDashboard">

        <div id="loadingMessage" class="">
            <strong th:text="#{cas.loggingdashboard.loading}"/>
        </div>

        <div id="errorLoadingData" class="alert alert-danger d-none">
            <h3 th:text="#{cas.loggingdashboard.loading.error}"/>
            <div>
                <input class="btn btn-success" type="button"
                       onclick="location.reload();" th:value="#{cas.ssosessions.button.refresh}"/>
            </div>
        </div>


        <div class="tabsContainer d-none">
            <div id="alert-container"></div>


            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="logger-tab" data-toggle="tab" href="#loggersTab" role="tab"
                       aria-controls="loggersTab" aria-selected="true">Loggers</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="logOutput-tab" href="#logOutputTab" aria-controls="logOutput"
                       role="tab" data-toggle="tab">CAS Log</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="auditLog-tab" data-toggle="tab" href="#auditLogTab" role="tab" aria-controls="auditLog" aria-selected="false">Audit Log</a>
                </li>
            </ul>

            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="loggersTab" role="tabpanel" aria-labelledby="logger-tab">
                    <table id="loggersTable" class="table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th></th>
                            <th th:text="#{cas.loggingdashboard.logger}"/>
                            <th th:text="#{cas.loggingdashboard.additive}"/>
                            <th th:text="#{cas.loggingdashboard.state}"/>
                            <th th:text="#{cas.loggingdashboard.level}"/>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td></td>
                            <td>logger</td>
                            <td>additive</td>
                            <td>state</td>
                            <td>level</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="tab-pane fade" id="logOutputTab" role="tabpanel" aria-labelledby="logOutput-tab">
                    <div id="websocketStatus" class="alert alert-info" style="visibility:hidden"></div>

                    <textarea id="logoutputarea" rows="20" cols="20"></textarea>
                </div>

                <div class="tab-pane fade" id="auditLogTab" role="tabpanel" aria-labelledby="auditLog-tab">
                    <table id="auditLogTable" class="display table table-striped table-bordered">
                        <thead>
                        <tr>
                            <th>Who</th>
                            <th>What</th>
                            <th>Action</th>
                            <th>When</th>
                            <th>Client IP</th>
                            <th>Server IP</th>
                        </tr>
                        </thead>
                        <tbody/>
                    </table>
                </div>
            </div>
            <div th:replace="monitoring/fragments/footerButtons"/>
        </div>
    </div>
</div>
</body>
</html>
